

/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
async function select() {
    const data = await axios({
        url: '/v1_0/channels'
    })

    const htmlstr = `<option value="" selected="">请选择文章频道</option>`
        + data.data.channels.map(item => {
            return `<option value="${item.id}" >${item.name}</option>`
        })
    document.querySelector('.form-select').innerHTML = htmlstr
}
select()
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */

document.querySelector('.img-file').addEventListener('change', async e => {
    const img = e.target.files[0]
    const fd = new FormData()
    fd.append('image', img)
    const res = await axios({
        url: '/v1_0/upload',
        method: 'post',
        data: fd
    })

    res.data.url && (document.querySelector('.rounded').src = res.data.url)
    document.querySelector('.rounded').classList.add('show')
    document.querySelector('.place').classList.add('hide')
})
document.querySelector('.rounded').addEventListener('click', e => {
    document.querySelector('.img-file').click()
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async (e) => {
    if (e.target.innerHTML == '发布') {
        if (document.querySelector('.form-control').value == '') {
            myAlert(false, '文章标题不能为空'); return
        }
        else {
            const form = document.querySelector('.art-form')
            const data = serialize(form, { hash: true, empty: true })
            delete data.id
            data.cover = {
                type: 1,
                images: [document.querySelector('.rounded').src]

            }
            try {
                const res = await axios({
                    url: '/v1_0/mp/articles',
                    method: 'post',
                    data: data
                })
                myAlert(true, '发布成功')
                form.reset()
                document.querySelector('.rounded').src = ''
                document.querySelector('.rounded').classList.remove('show')
                document.querySelector('.place').classList.remove('hide')
                editor.setHtml('')
                setTimeout((e => {
                    location.href = '../content/index.html'
                }), 1500)

            } catch (error) {
                myAlert(false, error.response.message)
            }
        }

    }



})

    /**
     * 目标4：编辑-回显文章
     *  4.1 页面跳转传参（URL 查询参数方式）
     *  4.2 发布文章页面接收参数判断（共用同一套表单）
     *  4.3 修改标题和按钮文字
     *  4.4 获取文章详情数据并回显表单
     */
    ; (function () {
        const ul = location.search
        const para = new URLSearchParams(ul)
        para.forEach(async (value, key) => {
            console.log(value);
            if (key == 'id') {
                const res = await axios({
                    url: `/v1_0/mp/articles/${value}`,

                })
                console.log(res);
                document.querySelector('.title').innerHTML = '<span>修改文章</span>'
                document.querySelector('.btn ').innerHTML = '修改'
                const resobj = {
                    channel_id: res.data.channel_id,
                    content: res.data.content,
                    title: res.data.title,
                    id: res.data.id,
                    images: res.data.cover.images[0]
                }

                Object.keys(resobj).forEach(key => {
                    if (key == 'images') {
                        if (resobj[key]) {
                            document.querySelector('.rounded').src = resobj[key]
                            document.querySelector('.rounded').classList.add('show')
                            document.querySelector('.place').classList.add('hide')

                        }
                    } else if (key == 'content') {

                        editor.setHtml(resobj[key])
                    } else {
                        document.querySelector(`[name=${key}]`).value = resobj[key]

                    }
                })

            }
        })
    })();
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async e => {
    if (e.target.innerHTML == '修改') {
        if (document.querySelector('.form-control').value == '') {
            myAlert(false, '内容不能为空')
        } else {
            const nid = document.querySelector(`[name='id']`).value
            const form = document.querySelector('.art-form')
            const data = serialize(form, { hash: true, empty: true })
            delete data.id
            data.cover = {
                type: 1,
                images: [document.querySelector('.rounded').src]

            }
            try {
                const res = await axios({
                    url: `/v1_0/mp/articles/${nid}`,
                    method: 'put',
                    data
                })
                myAlert(true, '修改文章成功')
                setTimeout(() => {
                    location.href = '../content/index.html'
                }, 1500)
            } catch (err) {

            }

        }




    }
})